import { Component, OnInit } from '@angular/core';
import { EnvironmentalMonitoringService } from 'src/app/services/project/smart-site/environmental-monitoring';
import { ActivatedRoute, Router } from '@angular/router';
declare const echarts: any;
@Component({
  selector: 'app-environmental-monitoring',
  templateUrl: './environmental-monitoring.component.html',
  styleUrls: ['./environmental-monitoring.component.scss']
})
export class EnvironmentalMonitoringComponent implements OnInit {
  public projectInfo: any = JSON.parse(window.localStorage.getItem('project'));
  public echartsPM25RadioValue = '7';
  public echartsPM10RadioValue = '7';
  public echartsNoiseRadioValue = '7';
  public echartsTemperatureRadioValue = '7';
  public echartsWindSpeedValue = '7';
  public pm25EchartsOption: any;
  public pm10EchartsOption: any;
  public noiseEchartsOption: any;
  public temperatureOption: any;
  public windSpeedOption: any;
  public topList = [];

  constructor(
    private router: Router,
    private environmentalMonitoringService: EnvironmentalMonitoringService
  ) { }

  ngOnInit() {
    this.initData();
  }

  routeToSurvey() {
    const projectId = JSON.parse(window.localStorage.getItem('project')).id;
    this.router.navigate([`/inner/project/${projectId}/survey`], { queryParams: { info: 'project' } });
  }

  setPm25EchartsOption() {
    this.pm25EchartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '5%',
        top: '10%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: { color: '#eee' }    // x轴刻度的颜色
        },
      },
      series: [{
        name: 'PM2.5',
        itemStyle: {
          color: 'rgba(65, 159, 229, 0.7)'
        },
        lineStyle: {
          normal: {
            color: 'rgba(65, 159, 229, 0.7)'   // 线条颜色
          }
        },
        smooth: true, // 是否平滑曲线显示
        data: [],
        type: 'line',
        areaStyle: { // 区域填充样式
          normal: {
            // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(65, 159, 229, 0.7)' },
              { offset: 0.7, color: '#ffffff' }
            ], false),
            // shadowColor: 'rgba(65, 159, 229, 0.7)', //阴影颜色
            // shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        markLine: {
          silent: true,
          symbol: 'circle',
          symbolSize: 5,
          // label: {
          //   position: "middle",
          //   formatter: "{b}"
          // },
          data: [{
            name: '预警线',
            yAxis: 75,
            lineStyle: {
              type: 'solid',
              width: 2,
              color: '#d60000'
            },
            label: {
              position: 'end',
              formatter: '{b}\n {c}'
            }
          }]
        },
      }]
    };
  }

  setPm10EchartsOption() {
    this.pm10EchartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '5%',
        top: '10%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: { color: '#eee' }    // x轴刻度的颜色
        },
      },
      series: [{
        name: 'PM2.5',
        itemStyle: {
          color: '#996ad1'
        },
        lineStyle: {
          normal: {
            color: '#996ad1'   // 线条颜色
          }
        },
        smooth: true, // 是否平滑曲线显示
        data: [],
        type: 'line',
        areaStyle: { // 区域填充样式
          normal: {
            // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#996ad1' },
              { offset: 0.7, color: '#fff' }
            ], false),
            // shadowColor: '#996ad1', //阴影颜色
            // shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        markLine: {
          silent: true,
          symbol: 'circle',
          symbolSize: 5,
          // label: {
          //   position: "middle",
          //   formatter: "{b}"
          // },
          data: [{
            name: '预警线',
            yAxis: 70,
            lineStyle: {
              type: 'solid',
              width: 2,
              color: '#d60000'
            },
            label: {
              position: 'end',
              formatter: '{b}\n {c}'
            }
          }]
        },
      }]
    };
  }

  setNoiseEchartsOption() {
    this.noiseEchartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '5%',
        top: '10%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
      },
      yAxis: {
        type: 'value',
        max: 150,
        splitLine: {
          lineStyle: { color: '#eee' }    // x轴刻度的颜色
        },
      },
      series: [{
        name: '噪音',
        itemStyle: {
          color: '#bdc643'
        },
        lineStyle: {
          normal: {
            color: '#bdc643'   // 线条颜色
          }
        },
        smooth: true, // 是否平滑曲线显示
        data: [],
        type: 'line',
        areaStyle: { // 区域填充样式
          normal: {
            // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#bdc643' },
              { offset: 0.7, color: '#fff' }
            ], false),
            // shadowColor: '#bdc643', //阴影颜色
            // shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        markLine: {
          silent: true,
          symbol: 'circle',
          symbolSize: 5,
          // label: {
          //   position: "middle",
          //   formatter: "{b}"
          // },
          data: [{
            name: '预警线',
            yAxis: 60,
            lineStyle: {
              type: 'solid',
              width: 2,
              color: '#d60000'
            },
            label: {
              position: 'end',
              formatter: '{b}\n {c}'
            }
          }]
        },
      }]
    };
  }

  setTemperatureOption() {
    this.temperatureOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '5%',
        top: '10%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: { color: '#eee' }    // x轴刻度的颜色
        },
      },
      series: [{
        itemStyle: {
          color: '#ea825b'
        },
        lineStyle: {
          normal: {
            color: '#ea825b'   // 线条颜色
          }
        },
        smooth: true, // 是否平滑曲线显示
        data: [],
        type: 'line',
        areaStyle: { // 区域填充样式
          normal: {
            // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#ea825b' },
              { offset: 0.7, color: '#fff' }
            ], false),
            // shadowColor: '#ea825b', //阴影颜色
            // shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        markLine: {
          silent: true,
          symbol: 'circle',
          symbolSize: 5,
          // label: {
          //   position: "middle",
          //   formatter: "{b}"
          // },
          data: [{
            name: '预警线',
            yAxis: 40,
            lineStyle: {
              type: 'solid',
              width: 2,
              color: '#d60000'
            },
            label: {
              position: 'end',
              formatter: '{b}\n {c}'
            }
          }]
        },
      }]
    };
  }

  setWindSpeedOption() {
    this.windSpeedOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '5%',
        top: '10%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: { color: '#eee' }    // x轴刻度的颜色
        },
      },
      series: [{
        itemStyle: {
          color: '#ffc11e'
        },
        lineStyle: {
          normal: {
            color: '#ffc11e'   // 线条颜色
          }
        },
        smooth: true, // 是否平滑曲线显示
        data: [],
        type: 'line',
        areaStyle: { // 区域填充样式
          normal: {
            // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#ffc11e' },
              { offset: 0.7, color: '#fff' }
            ], false),
            // shadowColor: '#ffc11e', //阴影颜色
            // shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
      }]
    };
  }

  initData() {
    const dataArray = [{
      type: 3,
      range: this.echartsPM25RadioValue,
      option: 'pm25EchartsOption'
    }, {
      type: 5,
      range: this.echartsNoiseRadioValue,
      option: 'noiseEchartsOption'
    }, {
      type: 1,
      range: this.echartsTemperatureRadioValue,
      option: 'temperatureOption'
    }, {
      type: 4,
      range: this.echartsPM10RadioValue,
      option: 'pm10EchartsOption'
    }, {
      type: 6,
      range: this.echartsWindSpeedValue,
      option: 'windSpeedOption'
    }];
    dataArray.forEach(data => {
      this.handleQueryProjectsEnvironmentReport(data);
    });
    this.handleQueryCurrentProjectsEnvironmentReport();
  }

  radioChange(range, option) {
    const typeObject = {
      'temperatureOption': 1,
      'pm25EchartsOption': 3,
      'pm10EchartsOption': 4,
      'noiseEchartsOption': 5,
      'windSpeedOption': 6
    };
    const data = {
      type: typeObject[option],
      range,
      option
    };
    this.handleQueryProjectsEnvironmentReport(data);
  }

  async handleQueryCurrentProjectsEnvironmentReport() {
    const params = {
      projectId: this.projectInfo.smartSiteId,
    };
    const res = await this.environmentalMonitoringService.QueryCurrentProjectsEnvironmentReport(params);
    this.topList = res.result;
    // tslint:disable-next-line:max-line-length
    // this.topList = [{ name: '当前PM2.5' , value: '146μg/m³' }, { name: '当前PM10'  , value: '86μg/m³'}, { name: '当前噪音' , value: '146μg/m³' }, { name: '当前风速' , value: '15m/s' }, { name: '当前温度'  , value: '34℃'}];
  }

  async handleQueryProjectsEnvironmentReport(params) {
    const data = {
      projectId: this.projectInfo.smartSiteId,
      ...params
    };
    await this.environmentalMonitoringService.QueryProjectsEnvironmentReport(data).then(res => {
      const option = params.option;
      if (option === 'pm25EchartsOption') {
        this.setPm25EchartsOption();
      } else if (option === 'pm10EchartsOption') {
        this.setPm10EchartsOption();
      } else if (option === 'temperatureOption') {
        this.setTemperatureOption();
      } else if (option === 'noiseEchartsOption') {
        this.setNoiseEchartsOption();
      } else if (option === 'windSpeedOption') {
        this.setWindSpeedOption();
      }
      // console.log(this[option])
      this[option].xAxis.data = Object.keys(res.result);
      const temp = Object.values(res.result).map(element => {
        return element || '0';
      });
      this[option].series[0].data = temp;
    });
  }
}
